<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" href="css/globe.css"/>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function login() {
            var username = $("#username").val();
            var password = $("#password").val();

            if (username === "" || password === "") {
                $("#msg").text("用户名密码不能为空！");
                return;
            }

            $.ajax({
                url: "${pageContext.request.contextPath}/user/login",
                type: "post",
                dataType: "json",
                data: {
                    username: username,
                    password: password
                },
                success: function (data) {
                    if (data.flag) {
                        window.location.href = "${pageContext.request.contextPath}/" + data.data;
                    } else {
                        $("#msg").text(data.infoMsg);
                    }
                },
                error: function () {
                    alert("发送失败");
                }
            });
        }

        function loginAd() {
            var username = $("#username_ad").val();
            var password = $("#password_ad").val();

            if (username === "" || password === "") {
                $("#msg_ad").text("用户名密码不能为空！");
                return;
            }

            $.ajax({
                url: "${pageContext.request.contextPath}/user/loginAd",
                type: "post",
                dataType: "json",
                data: {
                    username: username,
                    password: password
                },
                success: function (data) {
                    if (data.flag) {
                        sessionStorage.setItem("admin", username);
                        window.location.href = "${pageContext.request.contextPath}/" + data.data;
                    } else {
                        $("#msg_ad").text(data.infoMsg);
                    }
                },
                error: function () {
                    alert("发送失败");
                }
            });
        }

        function changeRadio() {
            var myRadio = $("[name='myRadio']");
            var divForm = $("[name='divForm']");
            for (var i = 0; i < divForm.length; i++) {
                if (myRadio[i].checked) {
                    divForm[i].style.display = "block";
                } else {
                    divForm[i].style.display = "none";
                }
            }
        }
    </script>
    <style>
        #login_form {
            height: 200px;
            width: 400px;
            margin: 100px auto;
            padding-top: 20px;
            text-align: center;
            border: 2px dashed pink;
            align-items: center;
        }

        .divForm {
            width: 80%;
            margin: 20px auto;
        }

        .divForm table {
            margin: auto;
            border-collapse: separate;
            border-spacing: 10px;
        }

        .divForm th {
            padding: 0 4px;
        }
    </style>
</head>

<body>
<jsp:include page="user_bar.jsp"/>
<div id="login_form">
    <div>
        <label>
            <input type="radio" name="myRadio" checked="checked" onClick="changeRadio()"/>用户
        </label>
        <label>
            <input type="radio" name="myRadio" onClick="changeRadio()"/>管理员
        </label>
    </div>


    <%--用户--%>
    <div class="divForm" name="divForm" style="display:block">
        <form action="javascript:login();" method="post">
            <table>
                <tr>
                    <th>用户名</th>
                    <th><label>
                        <input type="text" id="username" name="username"/>
                    </label></th>
                </tr>
                <tr>
                    <th>密码</th>
                    <th><label>
                        <input type="password" id="password" name="password"/>
                    </label></th>
                </tr>
                <tr>
                    <th colspan="2">
                        <input class="gb_button" type="submit" value="登录" name="submit"/>
                    </th>
                </tr>
                <tr>
                    <th colspan="2">
                        <p id="msg">&nbsp;</p>
                    </th>
                </tr>
                <tr>
                    <th colspan="2">
                        <a href="register.jsp">没有账号？跳转注册</a>
                    </th>
                </tr>
            </table>
        </form>
    </div>

    <%--管理员--%>
    <div class="divForm" name="divForm" style="display:none">
        <form action="javascript:loginAd();" method="post">
            <table>
                <tr>
                    <th>管理员账号</th>
                    <th>
                        <input type="text" id="username_ad" name="username"/>
                    </th>
                </tr>
                <tr>
                    <th>密码</th>
                    <th>
                        <input type="password" id="password_ad" name="password"/>
                    </th>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="submit" value="登录" name="submit"/>
                    </th>
                </tr>
                <tr>
                    <th colspan="2" style="color: #ff4848;font-size: 14px">
                        <p id="msg_ad">&nbsp;</p>
                    </th>
                </tr>
            </table>
        </form>

    </div>
</div>
</body>
</html>
